<template>
  <div>
    <div class="err-box" v-show="errbox">
      <errbox></errbox>
    </div>
    <div class="pro-box" v-show="probox">
      <div class="nav-bar">
        <div class="container">
          <div class="left">{{ proinfo.pro_name }}</div>
          <div class="right">
            <a href="">概述</a>
            <span class="separator">|</span>
            <a href="">参数</a>
            <span class="separator">|</span>
            <a href="">资讯客服</a>
            <span class="separator">|</span>
            <a href="">用户评论</a>
          </div>
        </div>
      </div>
      <div class="pro-con">
        <div class="container">
          <div class="img-left">
            <el-carousel
              :interval="5000"
              arrow="always"
              width="560px"
              height="565px"
            >
              <el-carousel-item v-for="(item, index) in slideList" :key="index">
                <img :src="item" alt="" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <div class="pro-right">
            <div class="title">{{ proinfo.pro_name }}</div>
            <div class="subtitle">
              {{ proinfo.subtitle }}
            </div>
            <div class="price">
              价格：<span>{{ proinfo.price }}元</span>
            </div>
            <div class="address-box">
              <i class="iconfont-location"></i>
              <div class="address-con">
                <div class="address-info">
                  <span>北京</span>
                  <span>北京市</span>
                  <span>海淀区</span>
                  <span>清河街道</span>
                  <a href="javascript:;" class="edit">修改</a>
                </div>
              </div>
              <div class="info">
                <span>有现货</span>
              </div>
            </div>
            <div class="buypotion">
              <div class="buybox-child">
                <div class="option-box">
                  <div class="title">选择版本</div>
                  <div class="option-list">
                    <ul>
                      <li v-for="item in proEdition" :key="item">
                        {{ item }}
                      </li>
                    </ul>
                  </div>
                </div>
                <div class="option-box">
                  <div class="title">选择颜色</div>
                  <div class="option-list">
                    <ul>
                      <li v-for="item in proColors" :key="item">
                        {{ item }}
                      </li>
                    </ul>
                  </div>
                </div>
              </div>

              <div class="buy-box">
                <div class="buy-num">
                  <el-input-number
                    v-model="num"
                    @change="handleChange"
                    :min="1"
                    :max="10"
                    label="描述文字"
                  ></el-input-number>
                </div>
                <div class="buy-btn">
                  <a href="javascript:;" @click="addCarts">加入购物车</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="detail-box">
        <div class="container">
          <div class="title">价格说明</div>
          <div class="img-box">
            <img
              data-v-eb8da102=""
              data-src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a482afa34053b1b32ece1023475af7fb.jpeg"
              src="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/a482afa34053b1b32ece1023475af7fb.jpeg"
              lazy="loaded"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import errbox from "./../components/errbox";
import qs from "qs";
export default {
  name: "product",
  components: {
    errbox,
  },
  methods: {
    addCarts() {
      let username = this.$store.state.username;
      let uid = this.$cookie.get("uid");
      var cartpro = {
        uid: uid,
        pid: this.proinfo.pid,
        proname: this.proinfo.pro_name,
        proimg: this.proinfo.sub_images.split("|")[0],
        proprice: this.proinfo.price,
        prototalprice: this.proinfo.price * this.num,
        num: this.num,
      };

      if (username) {
        this.axios
          .post("/addCarts", qs.stringify(cartpro))
          .then((res) => {
            if (res) {
              this.$router.push("/cart");
            }
          })
          .catch((err) => {});
      } else {
      }
    },
    getProInfo() {
      let pid = this.$route.params.id;
      this.axios
        .get("/getProInfo", {
          params: {
            pid: pid,
          },
        })
        .then((res) => {
          if (res[0]) {
            this.proinfo = res[0];
            this.probox = true;
          } else {
            this.errbox = true;
          }
        })
        .catch((err) => {
          this.errbox = true;
        });
    },
  },
  mounted() {
    this.getProInfo();
  },
  computed: {
    slideList() {
      return this.proinfo.sub_images.split("|");
    },
    proEdition() {
      return this.proinfo.edition.split("|");
    },
    proColors() {
      return this.proinfo.colors.split("|");
    },
  },
  data() {
    return {
      errbox: false,
      probox: false,
      num: 1,
      proinfo: {
        pid: 0,
        pro_name: "",
        subtitle: "",
        sub_images: "",
        price: "",
        edition: "",
        colors: "",
      },
    };
  },
};
</script>

<style lang="scss">
.pro-box {
  .nav-bar {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    .container {
      height: 63px;
      line-height: 63px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        font-size: 18px;
        font-weight: 400;
        color: #424242;
      }
      .right {
        color: #616161;
        font-size: 14px;
        .separator {
          margin: 0 0.5em;
          color: #e0e0e0;
        }
      }
    }
  }
  .detail-box {
    height: 189px;
    background: #f5f5f5;
    padding-bottom: 100px;
    .container {
      .title {
        height: 76px;
        line-height: 76px;
        font-size: 22px;
      }
    }
  }
  .pro-con {
    padding-top: 32px;
    padding-bottom: 12px;
    .container {
      display: flex;
      justify-content: space-between;
      // align-items: center;
      .img-left {
        width: 606px;
        .el-carousel__container {
          img {
            height: 560px;
            width: 560px;
          }
        }
        .el-carousel__button {
          background-color: #999;
        }
        .el-carousel__arrow--left {
          left: 16px;
        }
      }
      .pro-right {
        margin-left: 20px;
        width: 600px;
        .buy-box {
          display: flex;
          margin-top: 20px;
          margin-bottom: 20px;
          .buy-btn {
            margin-left: 10px;
            a {
              display: inline-block;
              width: 300px;
              height: 40px;
              background: #ff6700;
              text-align: center;
              line-height: 40px;
              color: #fff;
              font-size: 16px;
            }
          }
        }
        .buypotion {
          .buybox-child {
            .option-box {
              margin-bottom: 20px;
              .title {
                font-size: 18px;
              }
              .option-list {
                margin-top: 5px;
                ul {
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin-bottom: 10px;
                  li {
                    width: 294px;
                    height: 44px;
                    text-align: center;
                    line-height: 44px;
                    border: 1px solid #e0e0e0;
                    cursor: pointer;
                    font-size: 16px;
                  }
                }
              }
            }
          }
        }
        .title {
          font-size: 24px;
          font-weight: 400;
          color: #212121;
          height: 36px;
          line-height: 36px;
        }
        .subtitle {
          padding-top: 8px;
          color: #b0b0b0;
          font-size: 14px;
          line-height: 1.5;
        }
        .price {
          font-size: 18px;
          line-height: 1;
          color: #ff6700;
          padding: 12px 0 10px;
        }
        .address-box {
          margin: 20px 0;
          padding: 30px 50px;
          position: relative;
          background: #fafafa;
          border: 1px solid #e0e0e0;

          .address-con {
            .address-info {
              span {
                display: inline;
                margin-right: 14px;
              }
              a {
                color: #ff6700;
              }
            }
          }
          .info {
            margin-top: 10px;
            span {
              color: #ff6700;
            }
          }
        }
      }
    }
  }
}
</style>